import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { R_TABLE_PAGINATOR_A } from '../../../../r-common/r-models/r-table-paginator';
import { RCommonListComponent } from '../../../r-component/r-common-list/r-common-list.component';
import { RTable, TABLE_TYPE } from '../../../r-models/r-table.model';
import { RSendRequestService } from '../../../r-service/r-send-request.service';
import { RTableService } from '../../../r-service/r-table.service';

@Component({
  selector: 'oy-common-list-example',
  templateUrl: './common-list-example.component.html',
  styleUrls: ['./common-list-example.component.scss']
})

/**
 * 描述：公共列表表格组件使用TS使用范例
 * 公司：xxx有限公司
 * 版权：xxx2020
 * 作者：oyjl
 * 时间：2020-04-22 10:46:19
 */
export class CommonListExampleComponent extends RCommonListComponent implements OnInit {
  public rTable: RTable; // table配置
  public formModule: FormGroup; // 查询列表表单对象

  public useStateList: Array<any>; // 状态下拉（单选）
  public useStateSelected: any;  // 状态选中项
  public audioList: Array<object>; // 音乐列表
  public dictList: Array<any>; // 字典下拉列表值
  public dictSelected: any; // 选中字典值

  constructor(
    private fb: FormBuilder,
    public rTableService: RTableService,
    public rSendRequestService: RSendRequestService) {
    super(rTableService);
    this.formModule = this.fb.group({
      typeName: '',
      type: ''
    });
    this.useStateList = JSON.parse(sessionStorage.getItem('status')) || [];
    // 默认静态数据，在没有提供接口的情况下，模拟接口数据展示，fieldStyle展示不同字段样式，命名方式field+Style
    const rows = [
      {
        typeName: '职称1', type: 'positionTitle', desc: '医士', value: '1',
        parentDict: { desc: '无' }, updateTime: '2020-04-23 21:09:36', fieldStyle: {
          typeNameStyle: { color: 'green' },
          descStyle: { color: 'blue' },
          valueStyle: { color: 'red' }
        }
      },
      { typeName: '职称2', type: 'positionTitle', desc: '医师', value: '2', parentDict: { desc: '无' }, updateTime: '2020-04-23 21:09:37' },
      { typeName: '职称5', type: 'positionTitle', desc: '护士', value: '3', parentDict: { desc: '无' }, updateTime: '2020-04-23 21:09:38' },
      { typeName: '职称4', type: 'positionTitle', desc: '护师', value: '4', parentDict: { desc: '无' }, updateTime: '2020-04-23 21:09:39' },
      { typeName: '职称3', type: 'positionTitle', desc: '技师', value: '5', parentDict: { desc: '无' }, updateTime: '2020-04-23 21:09:40' },

    ];
    this.rTable = new RTable({
      prop: {
        value: rows,
        columns: [
          { type: TABLE_TYPE.rd },
          { type: TABLE_TYPE.index },
          {
            header: '系统字典项', field: 'typeName', type: TABLE_TYPE.text, isSort: true, fieldOpEvt: (e, data) => {
              // 点击事件处理，传参为当前点击组件event,当前行数据
              this.rTableService.breadcrumbPath.push({
                label: data.desc,
                queryParams: {
                  level: this.rTableService.breadcrumbPath.length, // 层级
                  desc: data.typeName,
                  dictId: data.dictId,
                  useState: data.useState
                },
                // 面包屑点击处理函数
                command: (d) => {
                  const queryParams = d.item.queryParams;
                  this.rTableService.breadcrumbPath.splice(queryParams.level + 1); // 清除子节点
                  this.searchDataHandle({
                    req: {
                      bspDict: {
                        dictId: queryParams.dictId,
                        useState: queryParams.useState ? '1' : '0'
                      }
                    },
                    url: 'http://192.168.111.118:8111/bsp/rmApi/dict/bspDict/list'
                  }, R_TABLE_PAGINATOR_A);
                }
              });
              this.searchDataHandle({
                req: {
                  bspDict: {
                    dictId: data.dictId,
                    useState: data.useState ? '1' : '0'
                  }
                },
                url: 'http://192.168.111.118:8111/bsp/rmApi/dict/bspDict/list'
              }, R_TABLE_PAGINATOR_A);
            }
          },
          {
            // 动态拼接表格html片段, 多语言转换
            header: '字典名称', field: 'desc', type: TABLE_TYPE.text, langKey: 'login-help-center',
            htmlString: '<span>test</span>', initEvt: (e, row) => {
              if (e.desc === '个人') {
                e[row.field + '-htmlString'] = '<i class="fa fa-plus"></i>';
              }
            }
          },
          {
            // 比较自定义值，设定自定义样式
            header: '字典值', field: 'value', type: TABLE_TYPE.text, fieldClass: { symbol: '>', value: 1, class: 'color-red' }
          },
          {
            // 字典转换，通过获取sessionStorage中的数据做字典转换
            header: '上级字典', field: 'parentDict.desc', type: TABLE_TYPE.dict, dictType: 'systemDict'
          },
          {
            // 表格开关控制
            header: '状态', field: 'useState', type: TABLE_TYPE.sw,
            fieldOpEvt: (event, rowData) => {
              // this.operateMethod({
              //   service: this.systemDictService.update,
              //   http: this.http,
              //   req: {
              //     bspDict: {
              //       dictId: rowData.dictId,
              //       useState: rowData.useState ? '1' : '0'
              //     }
              //   }
              // });
            }
          },
          {
            header: '操作', type: TABLE_TYPE.operator, width: '136px', initEvt: (e, row) => {
              // 动态控制按钮显示，如果行数据中hiddenField定义的字段为true则隐藏
              if (e.desc === 'ownCloud') {
                e.dictDelete = true;
              }
            }, operator: [
              {
                text: '查看', inlineClass: '', clickEvt: (rowData) => {
                  rowData.pageStatus = 'detail';
                  this.rTableService.message('info', JSON.stringify(rowData));
                }
              },
              {
                text: '编辑', inlineClass: '', clickEvt: (rowData) => {
                  rowData.pageStatus = 'edit';
                }
              },
              {
                text: '删除', inlineClass: '', buttonAuthority: 'beforeAuth', clickEvt: (rowData) => {
                  this.rTableService.confirm({
                    header: '删除字典',
                    msg: '是否删除该字典',
                    closable: true,
                    acceptVisible: true,
                    rejectVisible: true,
                    time: 3000
                  });
                  // this.operateMethod({
                  //   service: this.systemDictService.delete,
                  //   http: this.http,
                  //   req: {
                  //     bspDict: {
                  //       dictId: rowData.dictId
                  //     }
                  //   }
                  // });
                }
              }
            ]
          }
        ],
        paginatorPosition: 'bottom', // 分页控件位置：top(顶部)，both（紧接表格下面），bottom（父级组件底部）
        scrollable: true,
        scrollHeight: '200px'
        // paginator: {
        //   total: rows.length
        // }
      }
    });
  }

  ngOnInit() {
    // 初始化表格数据
    this.searchDataHandle({
      req: {
        bspDict: {}
      },
      url: 'http://192.168.111.28:8080/rmApi/listAll'
    }, R_TABLE_PAGINATOR_A);
  }

  /**
   * 描述：字典查询
   * 作者：oyjl
   * 时间：2021-08-09 10:26:45
   */
  public searchDict() {
    const parama = this.formModule.value;
    this.searchDataHandle({
      req: {
        bspDict: {
          typeName: parama.typeName,
          type: parama.type,
          desc: this.dictSelected && this.dictSelected.desc
        }
      },
      url: 'http://192.168.111.28:8080/rmApi/listAll'
    }, R_TABLE_PAGINATOR_A);
  }

  /**
   * 描述：在终端打印选中表格数据
   * 作者：oyjl
   * 时间：2021-08-09 10:25:27
   */
  public showSelectedData() {
    console.log(this.rTable.prop.selection);
  }

  /**
   * 描述：数据字典下拉框，入参为事件、是否动态获取数据
   * 作者：oyjl
   * 时间：2021-08-09 10:23:28
   */
  public dictDropdown(e, isDynamicGetData) {
    if (isDynamicGetData) {
      this.rSendRequestService.sendRequestByPost('http://192.168.111.118:8111/bsp/rmApi/dict/bspDict/list', {
        bspDict: {},
        pageModel: {
          pageNo: 1,
          pageSize: 1000000
        }
      }).subscribe((res: any) => {
        if (res.operateSuccess) {
          this.dictList = res.pageModel.rows || [];
        }
      });
    }
  }

}
